<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/logo2.png" style="height:45px;" />
      <div class="title">{{ homeBaseName }}</div>
    </div>
    <div class="right-menu">
      <div class="menu-item">
        <div></div>
      </div>
      <div class="menu-item">
        您好, {{ username }}<i class="el-icon-s-custom" style="font-size: 20px;"></i>
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            退出<i class="el-icon-switch-button" style="font-size: 20px;"></i>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link to="/traceabilityMsg">
              <el-dropdown-item> 首 页 </el-dropdown-item>
            </router-link>
            <!-- <router-link to="/environmental-data-monitoring">
              <el-dropdown-item> 首 页 </el-dropdown-item>
            </router-link> -->
            <!-- <el-dropdown-item divided @click.native="gotoBigscreencfi">
              <span style="display: block">驾驶舱</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="toSocializedServices">
              <span style="display: block">社会化服务</span>
            </el-dropdown-item> -->
            <el-dropdown-item divided @click.native="chooseSystem">
              <span style="display: block">选择系统</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="chooseCompany">
              <span style="display: block">选择基地(溯源)</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="openDialog">
              <span style="display: block">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block">退 出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <PasswordDialog ref="passwordRef" />
  </div>
</template>

<script>
import { getToken, removeToken } from "@/utils/auth";
import PasswordDialog from "./components/PasswordDialog.vue";
import axios from "axios";
import permission from "@/store/modules/permission";
export default {
  name: "",
  components: { PasswordDialog },
  data () {
    return {
      account: '',
      userInfo: {},
      isshowtobigsceen: false,
      homeBaseName:sessionStorage.getItem('homeBaseName'),
      username: sessionStorage.getItem('account'),
      nowmenutype: permission.nowmenutype,
      organizationName: '',
      userType: '',
      routerPath: '',
    };
  },
  computed: {
    title () {
      return this.$store.getters.projectTitle;
    }
  },
  watch: {
    $route (to, from) {
      console.log(to.path);
    }
  },
  created () {
    this.routerPath = this.$route.path
    console.log(this.routerPath)
  },
  mounted () {
    this.account = getToken("account");
    this.username = this.account;
    this.organizationName = getToken("organizationName");
    this.userType = getToken("userType");
    let leng = getToken("organizationNo");
    if (leng) {
      this.isshowtobigsceen = true;
    }
  },
  methods: {
    toSocializedServices () {
      axios({
        url: this.$baseurl.webServiceUrl + 'userManagement/user/createAccessToken/sociallize',
        method: "get",
        headers: {
          Token: sessionStorage.token,
          Homebaseid: sessionStorage.getItem('homeBaseId')
        }
      }).then(res => {
        if (res.data && res.data.success) {
          window.open('http://fishery.ssagroup.cn:8080/socialized-services/#/login?accessToken=' + res.data.data)
        }
      });
    },
    gotoBigscreencfi () {
      // let par = '?account=' + JSON.parse(getToken('userInfo')).account + '&password=' + JSON.parse(getToken('userInfo')).password
      let url = 'http://fishery.ssagroup.cn:8080/bigscreencfi/#/login?token=' + sessionStorage.getItem('token') + '&homeBaseId=' + sessionStorage.getItem('homeBaseId')
      url = url
      window.open(url)
    },
    openDialog () {
      this.$refs.passwordRef.openDialog()
    },
    async logout () {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
    chooseCompany () {
      this.$router.push(`/choose-company`);
    },
    chooseSystem () {
      this.$router.push(`/choose-system`);
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.header {
  position: relative;
  z-index: 999;
  width: 100%;
  height: $headerHeight;
  background-color: $headerBg;
  display: flex;
  justify-content: space-between;

  .logo {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;

    img {
      height: 30px;
    }

    .title {
      margin-left: 20px;
      font-size: 20px;
      color: #fff;
      letter-spacing: 2px;
      font-weight: bold;
    }
  }

  .right-menu {
    height: 100%;
    line-height: $headerHeight;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    font-size: 14px;

    &:focus {
      outline: none;
    }

    .menu-item {
      height: 100%;
    }

    .avatar-container {
      padding: 0 50px 0 20px;
      cursor: pointer;

      .avatar-wrapper {
        position: relative;
        color: #fff;

        .el-icon-switch-button {
          position: absolute;
          top: 25px;
          right: -20px;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
